import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom容器 - createVNode (虚拟DOM) + render (渲染位置) 动态创建标签或者组件
const divVNode = createVNode('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
// 🔔 虚拟DOM(对象)成功写入到页面后，可通过 el 属性获取到真实DOM节点
const div = divVNode.el
// console.log('虚拟DOM', divVNode)
// console.log('真实DOM', div)

const Message = ({ message, type }) => {
  // 1. 动态创建虚拟DOM  -  createVNode(h) 函数
  // 构建标签 + 样式 + 内容 createVNode('div', { message, type },'内容')
  const VNode = createVNode(XtxMessage, { message, type })
  // 2. 渲染到body页面中 -  render 函数
  render(VNode, div)
  // 3. 提示在 3s 后自动卸载
  setTimeout(() => {
    render(null, div)
  }, 3000)
}

export default Message
